<template>
  <div class="container">
    <div class="box">
      <h2>找回密码</h2>
      <section class="step-box">
        <el-steps :active="active" finish-status="success" align-center>
          <el-step title="验证手机号"></el-step>
          <el-step title="设置新密码"></el-step>
          <el-step title="新密码成功设置"></el-step>
        </el-steps>
      </section>
      <component :is="currentComponent" @next="onNext" @complete="onComplete" />
    </div>
  </div>
</template>
<script >
  import ForgetStep1 from '@/components/forget/Step1.vue';
  import ForgetStep2 from '@/components/forget/Step2.vue';
  import ForgetStep3 from '@/components/forget/Step3.vue';
  import { doUpdatePwd } from '@/apis/user';

  export default {
    name: 'Forget',
    components: { ForgetStep1, ForgetStep2, ForgetStep3 },
    data() {
      return {
        active: 0,
        currentComponent: 'ForgetStep1',
        form: {}
      };
    },
    methods: {
      async check_update() {
        if (this.form.password.password !== this.form.password.password2) {
          console.log(this.form);
          alert('密码两次输入的不一样！');
          return false;
        }
        try {
          const check = await doUpdatePwd({ telephone: this.form.telephone, password: this.form.password.password, authCode: this.form.authCode });
          console.log(JSON.stringify(check));
          if ((check != null) && (check.code === 200)) {
            return true;
          } else {
            alert('修改密码失败，请检查电话号码或者是验证码是否输入正确！');
            this.active = 0;
            this.currentComponent = 'ForgetStep1';
          }
        } catch (e) {
          alert('修改密码失败，请检查电话号码或者是验证码是否输入正确！');
          this.active = 0;
          this.currentComponent = 'ForgetStep1';
        }
        return false;
      },

      async onNext(data) {
        if (this.active === 0) {
          this.form = data;
          this.active += 1;
          this.currentComponent = 'ForgetStep2';
        } else if (this.active === 1) {
          this.form.password = data;
          // console.log(this.form);
          if (await this.check_update() === false) {
            return;
          }
          this.active += 1;
          this.currentComponent = 'ForgetStep3';
        }
      },

      onComplete() {
        this.$router.replace('/login');
      }
    },

    created() {}
  };
</script>
<style lang="scss" type="text/scss" scoped>
$space: 20px;
.container {
  background-color: $c1;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  .box {
    background: white;
    padding: $space * 2;
    margin-top: -200px;
    width: 800px;
    border-radius: 4px;
    .step-box {
      margin: $space * 2 0;
    }
  }
}
</style>
